import React from 'react';
import { SmileOutlined } from '@ant-design/icons';
import { Link,Route, useHistory } from 'react-router-dom';
import './Content.css';
import Users from './Users';
import Posts from './Posts';
import UpdateMy from './UpdateMy';

const Content = () => {
  const history = useHistory()
  
  const btn4 = () => {
      history.push('/');
  }

  return (
    <div>
    <div id="left">
      <div id="icon">
        <SmileOutlined />
      </div>
      <Link to='/home/user'>
        <button id="btn1">用户管理</button>
      </Link>
      <Link to='/home/posts'>
        <button id="btn2">论坛管理</button>
      </Link>
      <Link to='/home/updatemy'>
        <button id="btn3">吃穿玩乐</button>
      </Link>
      <button id="btn4" onClick={btn4}>退出</button>
    </div>

    <div id="right">
      <Route path='/home/user' render={()=><Users />}/>
      <Route path='/home/posts' render={()=><Posts />} />
      <Route path='/home/updatemy' render={()=><UpdateMy />} />
    </div>
  </div>
  )

}

export default Content
